<template>
  <div :class="className" :style="{ height: height, width: width }">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import "echarts-gl";
//   require('echarts/theme/macarons') // echarts theme
import resize from '../../../views/dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      const data = [
        { dateStr: '30米拖重', totalVolume: 80, supplyVolume: 0, permitVolume: 20 },
        { dateStr: '10楼负重', totalVolume: 75, supplyVolume: 0, permitVolume: 81 },
        { dateStr: '4楼攀爬绳索', totalVolume: 88, supplyVolume: 0, permitVolume: 57 },
        { dateStr: '100米负重', totalVolume: 68, supplyVolume: 0, permitVolume: 71 }
      ]
      var xAxisData = [], yAxisTotalData = [], yAxisWaterWorks = [], yAxisOwned = [];
      for (var i = 0; i < data.length; i++) {
        xAxisData.push(data[i].dateStr);
        yAxisTotalData.push((data[i].totalVolume).toFixed(2));
        yAxisWaterWorks.push((data[i].supplyVolume).toFixed(2));
        yAxisOwned.push((data[i].permitVolume).toFixed(2));
      }
      console.log(yAxisOwned);

      var option = {
        //  backgroundColor:"#000000",
        title: {
          text: '应用体能',
          textStyle: {
            // 字体大小
            fontSize: 12,
            // 字体颜色
            color: '#ffff',
            // 字体系列，如 'Arial', 'Microsoft YaHei' 等
            fontFamily: 'Microsoft YaHei',
            // 字体粗细，默认为 'normal'，可选 'bold', 'bolder', 'lighter', 100 | 200 | 300 | 400...
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '20%',
          right: '15%',
          left: '10%',
          bottom: '10%'
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#ffffff"
          },
          // data: ['优秀', '良好', '合格']
          data: ['优秀', '良好', '合格'],
        },
        xAxis: [{
          type: 'category',
          data: xAxisData,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel: {
            interval: 0,
            margin: 10,
            color: '#e2e9ff',
          },
        }],
        yAxis: [{
          name: '合格率（%）',
          boundaryGap: ['0%', '12%'],
          max: 100,
          nameTextStyle: {
            verticalAlign: 'middle',
            align: "center"
          },
          axisLabel: {
            formatter: '{value}%',
            color: '#e2e9ff',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
        }],
        series: [
          {
            name: "优秀",
            type: 'line',
            smooth: true,
            symbol: 'circle',
            smooth: false,
            symbolSize: 5,
            color: 'rgba(0, 255, 0, 1)',
            data: yAxisTotalData,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(0, 255, 0, 1)"
              },
              {
                offset: 1,
                color: "rgba(0, 173, 253, 0)"
              }
              ])
            },
            markLine: {
              //安全基线
              silent: true,
              lineStyle: {
                normal: {
                  color: '#01fef9' // 这儿设置安全基线颜色
                }
              },
              data: [
                {
                  yAxis: '80'
                }
              ],
              label: {
                normal: {
                  formatter: '最低合格' // 这儿设置安全基线
                }
              }
            }
          },
          // {
          //   name: "水厂供水量",
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   color: 'rgba(255, 255, 0, 1)',
          //   data: yAxisWaterWorks,
          //   areaStyle: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: "rgba(255, 255, 0, 1)"
          //     },
          //     {
          //       offset: 1,
          //       color: "rgba(0, 173, 253, 0)"
          //     }
          //     ])
          //   },
          // },
          {
            name: "良好",
            type: 'line',
            smooth: true,
            symbol: 'circle',
            smooth: false,
            symbolSize: 5,
            color: 'rgba(0, 160, 233, 1)',
            data: yAxisOwned,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(0, 160, 233, 1)"
              },
              {
                offset: 1,
                color: "rgba(0, 173, 253, 0)"
              }
              ])
            },
          },
          {
            name: "合格",
            type: 'line',
            smooth: true,
            symbol: 'circle',
            smooth: false,
            symbolSize: 5,
            color: '#FFC107',
            data: [],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(0, 160, 233, 1)"
              },
              {
                offset: 1,
                color: "rgba(0, 173, 253, 0)"
              }
              ])
            },
          }
        ]
      };
      this.chart.setOption(option)
    },

  }
}
</script>